<template>
  <div class="box">
    <van-nav-bar title="设置" left-arrow  @click-left="$router.go(-1)"></van-nav-bar>
    <div class="settingbox">
      <div class="setting" @click="$router.push('/my_SetUp/CategorySettings')">
        <img src="../../lib/img/my_SetUp/my_SetUp_1.png" alt="">
        <p>类别设置</p>
        <van-icon name="arrow" />
      </div>
      <div class="setting" @click="$router.push('/my_Timed_Reminder')">
        <img src="../../lib/img/my_SetUp/my_SetUp_2.png" alt="">
        <p>定时提醒</p>
        <van-icon name="arrow" />
      </div>
      <div class="setting">
        <img src="../../lib/img/my_SetUp/my_SetUp_3.png" alt="">
        <p>声音开关</p>
        <van-switch size=".25rem" v-model="voiceChecked" inactive-color="white" active-color="#07c160" />
      </div>
      <div class="setting">
        <img src="../../lib/img/my_SetUp/my_SetUp_4.png" alt="">
        <p>通知栏快捷入口</p>
        <van-switch size=".25rem" v-model="informChecked" inactive-color="white" active-color="#07c160" />
      </div>
      <div class="setting" @click="ClearCacheFn">
        <img src="../../lib/img/my_SetUp/my_SetUp_5.png" alt="">
        <p>清除缓存</p>
        <van-icon name="arrow" />
      </div>
      <div class="setting" @click="$router.push('/ComingSoon')">
        <img src="../../lib/img/my_SetUp/my_SetUp_6.png" alt="">
        <p>去应用市场给小懒猪记账评分</p>
        <van-icon name="arrow" />
      </div>
      <div class="setting" @click="$router.push('/ComingSoon')">
        <img src="../../lib/img/my_SetUp/my_SetUp_7.png" alt="">
        <p>意见反馈</p>
        <van-icon name="arrow" />
      </div>
      <div class="setting" @click="$router.push('/my_SetUp/help')">
        <img src="../../lib/img/my_SetUp/my_SetUp_8.png" alt="">
        <p>帮助</p>
        <van-icon name="arrow" />
      </div>
      <div class="setting" @click="$router.push('/UserAgreement')">
        <img src="../../lib/img/my_SetUp/my_SetUp_9.png" alt="">
        <p>隐私协议</p>
        <van-icon name="arrow" />
      </div>
      <div class="setting" @click="$router.push('/my_SetUp/follow')">
        <img src="../../lib/img/my_SetUp/my_SetUp_10.png" alt="">
        <p>关于小懒猪记账</p>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Icon, Switch, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Switch)
export default {
  // 设置data初始值
  data () {
    return {
      voiceChecked: false,
      informChecked: true
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    ClearCacheFn () {
      Toast('缓存已清除')
    }
  }
}
</script>

<style lang="scss" scoped>
.settingbox {
  width: 100%;
  height: 100%;
  background: #EAEAEA;
  .setting:nth-of-type(1) {
    margin-top: 0.1rem;
  }
  .setting {
    width: 100%;
    height: 0.5rem;
    border-bottom: 1px solid #f6f6f6;
    background: white;
    border-radius: 0.05rem;
    img {
      float: left;
      width: 0.18rem;
      height: 0.18rem;
      margin: 0.16rem 0.17rem;
    }
    p {
      float: left;
      margin-left: 0.04rem;
      line-height: 0.5rem;
      font-size: 0.14rem;
      color: #1C1C1C;
    }
  }
}
/deep/ .van-nav-bar {
  height: 0.6rem;
  background: #FDD949;
  box-shadow: 0px 0.05rem 0.05rem 0.01rem rgba(214,214,214,0.42);
}
/deep/ .van-icon-arrow-left {
  font-size: 0.18rem;
  line-height: 0.6rem;
  color: #000000;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  line-height: 0.6rem;
  color: #1C1C1C;
}
/deep/ .van-icon-arrow {
  float: right;
  font-size: 0.14rem;
  line-height: 0.5rem;
  color: #7D7D7D;
  margin-right: 0.15rem;
}
/deep/ .van-switch {
  float: right;
  margin: 0.11rem 0.15rem 0.11rem 0;
}
</style>
